<template>
  <div>
    <h3>表格</h3>
    <!-- el-table
                el-table
                    data:对应需要渲染的数据
                    一栏一栏：el-table-column
                                  label:当前栏的标题 
                                  prop:需要渲染的数据的字段名
                    自定义栏
                         template v-slot="{$index,row}"
                             自定义当前栏内容
                             $index:当前行的下标
                             row:当前行的数据    -->
    <el-table :data="list">
      <el-table-column label="日期" prop="date"></el-table-column>
      <el-table-column label="姓名" prop="name"></el-table-column>
      <el-table-column label="地址" prop="address"></el-table-column>
      <el-table-column label="操作">
        <template v-slot="{ $index, row }">
          <!-- $index:当前行的下标
                 row:当前行的数据
             -->
          <div>
            {{ $index }}-----{{ row }}
            <el-button>编辑</el-button>
            <el-button type="danger">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script>
export default {
  data () {
    return {
      list: [
        {
          date: '2016-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2016-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2016-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2016-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    }
  }
}
</script>
<style></style>
